<template>
  <div class="log-container">
    <el-form :inline="true" size="mini" ref="searchForm" :model="searchForm">
      <el-form-item label="日志日期">
        <el-date-picker
          style="width: 220px"
          :append-to-body="false"
          :popper-append-to-body="false"
          v-model="rangeDate"
          type="daterange"
          align="right"
          unlink-panels
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="设备编码">
        <el-input
          v-model="searchForm.equipCode"
          placeholder="请输入设备编码"
        ></el-input>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select
          size="small"
          v-model="searchForm.equipType"
          placeholder="设备类型"
        >
          <el-option
            v-for="item in enumsJson.EQUIP_TYPE"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          size="small"
          v-model="searchForm.statusCode"
          placeholder="请选择状态"
        >
          <el-option
            v-for="item in enumsJson.EQUIP_COMM_LOG_STATUS"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select
          size="small"
          v-model="searchForm.typeCode"
          placeholder="请选择类型"
        >
          <el-option
            v-for="item in enumsJson.READ_AND_WRITE_STATUS"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="终端类型">
        <el-select
          size="small"
          v-model="searchForm.terminalType"
          placeholder="终端类型"
        >
          <el-option
            v-for="item in enumsJson.TERMINAL_TYPE"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作人">
        <el-input
          v-model="searchForm.operBy"
          placeholder="请输入操作人"
        ></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button
          class="search_btn"
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="doSearch"
          >搜索</el-button
        >
        <el-button
          type="default"
          size="mini"
          icon="el-icon-refresh"
          @click="resetSearch"
          >重置</el-button
        >
        <!-- <el-button type="text" @click="doAdvanced"
          >{{ advanced ? "收起" : "展开"
          }}<i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i
        ></el-button> -->
      </el-form-item>
    </el-form>

    <Table
      :tableHeader="tableHeader"
      :tableData="tableData"
      :tableLoading="listLoading"
    >
      <template slot="action" slot-scope="scope">
        <el-button
          type="primary"
          size="mini"
          plain
          @click="addDialog(scope.row)"
          >详情</el-button
        >
      </template>
    </Table>
    <pagination
      v-if="total > 0"
      :total="total"
      :page.sync="searchForm.pageNum"
      :limit.sync="searchForm.pageSize"
      @pagination="fetchData"
    />

    <Dialog
      v-if="Object.keys(currentRow).length > 0"
      :visible="visible"
      width="30%"
      title="详情信息"
      :isFooter="false"
      @cancelDialog="cancelDialog"
    >
      <el-descriptions :column="1" class="des-details" border>
        <el-descriptions-item label="设备编码" labelStyle="color:#333">{{
          currentRow.equipCode
        }}</el-descriptions-item>
        <el-descriptions-item label="设备类型" labelStyle="color:#333">{{
          formmerData(enumsJson.EQUIP_TYPE, currentRow.equipType)
        }}</el-descriptions-item>

        <el-descriptions-item label="状态" labelStyle="color:#333">{{
          formmerData(enumsJson.EQUIP_COMM_LOG_STATUS, currentRow.statusCode)
        }}</el-descriptions-item>
        <el-descriptions-item label="类型" labelStyle="color:#333">{{
          formmerData(enumsJson.READ_AND_WRITE_STATUS, currentRow.typeCode)
        }}</el-descriptions-item>
        <el-descriptions-item label="消耗时间(ms)" labelStyle="color:#333">{{
          currentRow.costTime
        }}</el-descriptions-item>
        <el-descriptions-item label="终端类型" labelStyle="color:#333">{{
          formmerData(enumsJson.TERMINAL_TYPE, currentRow.terminalType)
        }}</el-descriptions-item>
        <el-descriptions-item label="请求参数" labelStyle="color:#333">{{
          currentRow.requestParam
        }}</el-descriptions-item>
        <el-descriptions-item label="响应参数" labelStyle="color:#333">{{
          currentRow.resultParam
        }}</el-descriptions-item>

        <el-descriptions-item label="操作人" labelStyle="color:#333">{{
          currentRow.operBy
        }}</el-descriptions-item>
        <el-descriptions-item label="操作用户ID" labelStyle="color:#333">{{
          currentRow.operUserId
        }}</el-descriptions-item>
        <el-descriptions-item label="操作时间" labelStyle="color:#333">{{
          currentRow.operTime
        }}</el-descriptions-item>

        <el-descriptions-item label="描述" labelStyle="color:#333">{{
          currentRow.remark
        }}</el-descriptions-item>
      </el-descriptions>
    </Dialog>
  </div>
</template>

<script>
import { equipCommlog } from "@/api/system";

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Table from "@/components/Table";
import Dialog from "@/components/Dialog";

import { removeNullUndefined } from "@/utils/index.js";
import moment from "moment";
import { mapState } from "vuex";
import vueJsonEditor from "vue-json-editor";

export default {
  components: { Pagination, Table, Dialog, vueJsonEditor },
  data() {
    return {
      listLoading: true,
      total: 0,

      searchForm: {
        pageNum: 1,
        pageSize: 16,
        terminalType: "",
        statusCode: "",
        typeCode: "",
        equipCode: "",
        equipType: "",
        startOperTime: "",
        endOperTime: "",
        operBy: "",
      },

      rangeDate: [],

      tableHeader: [
        {
          type: "index",
          label: "序号",
          width: "60",
          fixed: true,
        },
        {
          label: "设备编码",
          prop: "equipCode",
          width: "50",
        },
        {
          label: "设备类型",
          prop: "equipType",
          width: "30",
          formatter: (item) => {
            let classify = this.enumsJson.EQUIP_TYPE.find((p) => {
              return p.code == item.equipType;
            });
            return classify != undefined ? classify.label : item.equipType;
          },
        },
        {
          label: "状态",
          prop: "statusCode",
          width: "25",
          formatter: (item) => {
            let classify = this.enumsJson.EQUIP_COMM_LOG_STATUS.find((p) => {
              return p.code == item.statusCode;
            });
            return classify != undefined ? classify.label : item.equipType;
          },
        },
        {
          label: "类型",
          prop: "typeCode",
          width: "25",
          formatter: (item) => {
            let classify = this.enumsJson.READ_AND_WRITE_STATUS.find((p) => {
              return p.code == item.typeCode;
            });
            return classify != undefined ? classify.label : item.equipType;
          },
        },
        {
          label: "请求参数",
          prop: "requestParam",
          width: "35",
        },
        {
          label: "响应参数",
          prop: "resultParam",
          tooltip: true,
        },
        {
          label: "消耗时间(ms)",
          prop: "costTime",
          width: "28",
        },
        {
          label: "操作人",
          prop: "operBy",
          width: "30",
        },
        {
          label: "操作时间",
          prop: "operTime",
          width: "45",
        },
        { slot: "action", label: "操作", width: "90" },
      ],
      tableData: [],
      visible: false, //弹框标识

      currentRow: {},
      advanced: false,
    };
  },
  computed: {
    ...mapState({
      enumsJson: (state) => state.enums.enums,
    }),
  },
  created() {
    this.fetchData();
  },
  methods: {
    formatterTime(val) {
      return val ? moment(Number(val)).format("YYYY-MM-DD HH:mm:ss") : "";
    },
    fetchData(val) {
      this.searchForm.pageNum = val ? val.page : this.searchForm.pageNum;

      let param = { ...this.searchForm };
      if (this.rangeDate && this.rangeDate.length > 0) {
        param.startOperTime = this.rangeDate[0]+' 00:00:00';
        param.endOperTime = this.rangeDate[1] +' 23:59:39';
      }
      this.listLoading = true;
      this.tableData = [];
      this.total = 0;
      equipCommlog("/list", { ...removeNullUndefined(param) })
        .then((res) => {
          this.tableData = res.data;
          this.total = +res.total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },

    // 弹框取消
    cancelDialog() {
      this.visible = false;
      this.currentRow = {};
    },

    // 新增
    async addDialog(row) {
      this.visible = true;
      this.currentRow = { ...row };
    },

    resetSearch() {
      this.rangeDate = [];
      this.searchForm = {
        pageNum: 1,
        pageSize: 16,
        terminalType: "",
        statusCode: "",
        typeCode: "",
        equipCode: "",
        equipType: "",
        startOperTime: "",
        endOperTime: "",
        operBy: "",
      };
    },
    doSearch() {
      this.searchForm.pageNum = 1;
      this.fetchData();
    },
    // 展开折叠
    doAdvanced() {
      this.advanced = !this.advanced;
    },
    formmerData(array, value) {
      let current = array.find((p) => {
        return p.code == value;
      });
      return current != undefined ? current.label : value;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/common.scss";
.log-container {
  background-color: #ffffff;
  margin: 20px;
  padding-top: 10px;
  border-radius: 12px;
}
.search_btn {
  margin-left: 20px;
}

.condition {
  @include flexLayout(center, flex-start);
  flex-wrap: wrap;
}

// ::v-deep .el-date-editor .el-range-separator,
// ::v-deep .el-date-editor .el-range__icon {
//   line-height: 25px;
// }

::v-deep .el-descriptions-item__content {
  color: #000000;
  font-size: 16px;
}

::v-deep .el-descriptions-item__label {
  width: 95px;
  justify-content: flex-end;
}

.label-cont {
  width: 110px;
  text-align: right;
  margin-bottom: 10px;
}

.el-icon-arrow-up {
  color: #409eff;
}

::v-deep .jsoneditor-vue {
  margin-left: 4%;
}

::v-deep .jsoneditor-vue {
  height: 400px;
}
.request-param {
  margin-top: 12px;
}
.el-input,
.el-select {
  width: 130px;
}
</style>
